<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>保养任务详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <style>
        #layer-images img {
            width: 160px;
            height: 160px;
            margin: 5px;
        }
    </style>
</head>
<body>

<div class="layui-fluid" id="container">
    <div class="layui-card">
        <div class="layui-card-header">基本信息</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="maintain-task-form">
                <input type="hidden" name="id">
                <div class="layui-row">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">专项名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" class="layui-input" v-model="form.name" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">保养单元</label>
                            <div class="layui-input-block">
                                <input type="text" name="unitName" class="layui-input" v-model="form.unitName" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">建筑群</label>
                            <div class="layui-input-block">
                                <input type="text" name="tunnels" class="layui-input" v-model="form.tunnels" readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.unit == 2" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">区域</label>
                            <div class="layui-input-block">
                                <input type="text" name="areas" class="layui-input" v-model="form.areas" readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.unit == 3" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">设备系统</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceSystem" class="layui-input" v-model="form.deviceSystem"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">执行人</label>
                            <div class="layui-input-block">
                                <input type="text" name="executeByName" class="layui-input" v-model="form.executeByName"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">通知人</label>
                            <div class="layui-input-block">
                                <input type="text" name="notifyNames" class="layui-input" v-model="form.notifyNames"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state==1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">随行车辆</label>
                            <div class="layui-input-block">
                                <select id="vehicle" lay-filter="vehicle" lay-search>
                                    <option value="">选择车辆</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">随行车辆</label>
                            <div class="layui-input-block">
                                <input type="text" name="vehicle" class="layui-input" v-model="form.vehicle" readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state==1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">随行司机</label>
                            <div class="layui-input-block">
                                <select id="driver" lay-filter="driver" lay-search>
                                    <option value="">选择司机</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">随行司机</label>
                            <div class="layui-input-block">
                                <input type="text" name="driver" class="layui-input" v-model="form.driver" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">创建时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="createTime" class="layui-input" v-model="form.createTime"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">完成时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="completeTime" class="layui-input" v-model="form.completeTime"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div v-if="form.state>1" class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="text" name="stateText" class="layui-input" v-model="form.stateText"
                                       readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">任务子项</div>
        <div class="layui-card-body">
            <div id="layer-task-items"></div>
        </div>
    </div>
    <div v-if="form.state == 1" style="text-align: center;">
        <button v-if="task.state==1" class="layui-btn" @click="complete">完成专项任务</button>
        <button class="layui-btn layui-btn-danger" @click="cancel">撤销</button>
    </div>
</div>
<script id="maintain-task-items-tpl" type="text/html">
    <ul class="layui-timeline">
        {{# layui.each(d, function (index, item) { }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe67b;</i>
            <div class="layui-timeline-content layui-text">
                <h4 style="font-weight: bold;"><a href="#" class="maintain-item"
                                                  data-id="{{item.id}}">{{item.object}}【{{item.stateText}}】</a>
                </h4>
                <p>{{item.startTime || ''}} ~ {{item.endTime || ''}}</p>
            </div>
        </li>
        {{# }); }}
        {{# if(d.length === 0){ }}
        暂无数据
        {{# } }}
    </ul>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script src="/js/vue.min.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laytpl', 'util'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var id = getParam('id');
        var taskId = getParam('taskId');

        layui.util.fixbar();

        var vue = new Vue({
            el: "#container",
            data() {
                return {
                    form: {
                        maintainId: '',
                        name: '',
                        unit: '',
                        unitName: '',
                        tunnels: '',
                        areas: '',
                        deviceSystem: '',
                        executeByName: '',
                        notifyNames: '',
                        state: 0
                    },
                    task: {}
                }
            },
            mounted() {
                if (taskId) {
                    this.loadTask(taskId);
                } else if (id) {
                    this.loadForm(id);
                }
            },
            updated() {
                //form.render();
            },
            methods: {
                loadForm(id) {
                    let that = this;
                    $.get('maintain-tasks/' + id, function (result) {
                        var data = result.data;
                        that.form = data;
                        form.val('maintain-task-form', data);

                        if (that.form.state == 1) {
                            that.loadDrivers();
                            that.loadVehicles();
                        }

                        $.get('/maintain-task-items', {maintainTaskId: data.id}, function (res) {
                            var tpl = $('#maintain-task-items-tpl').html();
                            laytpl(tpl).render(res.data, function (html) {
                                $('#layer-task-items').html(html);
                            });
                            $('.maintain-item').on('click', function () {
                                showMaintainTaskItem($(this).data('id'));
                            });
                        });
                    });
                },
                loadTask(taskId) {
                    let that = this;
                    $.get('/tasks/' + taskId, function (res) {
                        that.task = res.data;
                        if (that.task) {
                            that.loadForm(that.task.formKey);
                        }
                        if (that.task.state == 2) {
                            layer.msg('该任务已处理');
                        }
                    });
                },
                loadDrivers() {
                    $.get('/drivers', function (res) {
                        var result = res.data;
                        for (var i in result) {
                            var item = result[i];
                            $('#driver').append('<option value="' + item.name + '">' + item.name + '</option>');
                        }
                        form.render();
                    });
                }, loadVehicles() {
                    $.get('/vehicles', function (res) {
                        var result = res.data;
                        for (var i in result) {
                            var item = result[i];
                            $('#vehicle').append('<option value="' + item.name + '">' + item.name + '</option>');
                        }
                        form.render();
                    });
                }, complete() {
                    let that = this;
                    $.post('/maintain-tasks/complete', {
                        taskId: taskId,
                        maintainTaskId: that.form.id,
                        vehicle: that.form.vehicle || '',
                        driver: that.form.driver || ''
                    }, function () {
                        window.location.reload();
                    });
                },
                cancel() {
                    layer.confirm('确定撤销该任务项吗？', function (index) {
                        $.post('/maintain-task-items/cancel', {
                            id: id
                        }, function (res) {
                            $('#operation-btns').hide();
                        });
                        that.form.state == 0;
                    });
                }
            }
        })

        function showMaintainTaskItem(id) {
            layer.open({
                title: '保养任务子项',
                type: 2,
                content: 'maintain-task-item.html?id=' + id,
                area: ['480px', '560px'],
                maxmin: true
            });
        }

        form.on("select(driver)", function (data) {
            vue.form.driver = $('#driver option:selected').text();
        });

        form.on("select(vehicle)", function (data) {
            vue.form.vehicle = $('#vehicle option:selected').text();
        });

    });
</script>
</body>
</html>